@import "mixin";

body {
  background-color: #fff9ef;
}

.first-screen {
  width: 100%;
  height: rem(291px);
  background: url("../images/m_marketing-top-bg.png") no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  >.top-platform-wrapper {
    >img {
      width: 100%;
    }
  }
  >.top-pocket-wrapper {
    margin: 0 auto;
    width: rem(358px);
    height: rem(426px);
    background: url("../images/m_marketing-top-pocket-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    >.info-wrapper {
      padding-top: rem(35px);
      >.text {
        text-align: center;
        font-family: "Microsoft Yahei";
        font-size: rem(12px);
        color: #dfb180;
      }
      >.money {
        margin: rem(7px) 0 rem(10px) 0;
        text-align: center;
        font-size: rem(12px);
        color: #f77150;
        >em {
          font-style: normal;
          font-size: rem(30px);
        }
      }
    }
    >.avatar-wrapper {
      padding-left: rem(60px);
      padding-top: rem(50px);
      padding-bottom: rem(20px);
      >.avatar {
        float: left;
        display: inline-block;
        vertical-align: top;
        width: rem(42px);
        height: rem(42px);
        border-radius: 50%;
        overflow: hidden;
        >img {
          width: 100%;
          height: 100%;
        }
      }
      >.user-info {
        padding-left: rem(8px);
        display: inline-block;
        vertical-align: top;
        line-height: rem(42px);
        >p {
          line-height: rem(21px);
          font-size: rem(12px);
          color: #ffffff;
          >.username {
            display: inline-block;
            vertical-align: middle;
            font-size: rem(12px);
            color: #ffffff;
          }
          >.icon-bind-name {
            margin-left: rem(8px);
            display: inline-block;
            vertical-align: middle;
            width: rem(52px);
            height: rem(11.5px);
            @include bg-image("../images/mobile-bind-name")
          }
          >.icon-bind-phone {
            margin-left: rem(8px);
            display: inline-block;
            vertical-align: middle;
            width: rem(52px);
            height: rem(11.5px);
            @include bg-image("../images/mobile-bind-phone")
          }
        }
      }
    }
    >.input-wrapper {
      padding-bottom: rem(10px);
      text-align: center;
      font-size: 0;
      >input {
        padding-left: rem(15px);
        display: inline-block;
        width: rem(283px);
        height: rem(34px);
        background-color: #ffffff;
        border-radius: rem(2px);
        font-size: rem(13px);
        color: #999999;
      }
    }
    >.form-group {
      margin-bottom: rem(10px);
      display: flex;
      width: 100%;
      padding: 0 rem(39px) 0 rem(37px);
      height: rem(34px);
      line-height: rem(34px);
      font-size: 0;
      >input {
        flex: 0 0 rem(163px);
        width: 163px;
        padding-left: rem(15px);
        display: inline-block;
        background-color: #ffffff;
        border-radius: rem(2px) 0 0 rem(2px);
        font-size: rem(13px);
        color: #999999;
      }
      >.phone-text-wrapper {
        flex: 0 0 rem(120px);
        width: rem(120px);
        height: 100%;
        >button {
          position: relative;
          width: 100%;
          height: 100%;
          background-color: #fff;
          border-radius: 0 rem(2px) rem(2px) 0;
          font-size: rem(13px);
          color: #dc3838;
          &:before {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: rem(-10px);
            content: '';
            width: 1px;
            height: rem(20px);
            background-color: #e5e5e5;
          }
        }
      }
    }
    >.btn-wrapper {
      padding-top: rem(8px);
      text-align: center;
      font-size: 0;
      >.btn {
        display: inline-block;
        width: rem(155px);
        height: rem(34px);
        line-height: rem(34px);
        text-align: center;
        background-color: #ffdf58;
        border-radius: rem(2px);
        font-size: rem(12px);
        color: #cd5013;
      }
    }
  }
}

.step-wrapper {
  padding-bottom: rem(14px);
  margin-top: rem(302px);
  text-align: center;
  font-size: 0;
  >img {
    width: rem(343px);
    height: rem(200px);
  }
}

.activity-wrapper {
  padding-top: rem(60px);
  width: 100%;
  height: rem(526px);
  background: url("../images/mobile-activity-background.png") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  >.item-wrapper {
    >.item {
      margin: 0 auto rem(5px);
      width: rem(343px);
      height: rem(84px);
      background-color: #fff;
      border-radius: rem(4px);
      >a {
        display: block;
        width: 100%;
        height: 100%;
        >.item-left {
          float: left;
          position: relative;
          padding-top: rem(24px);
          display: inline-block;
          text-align: center;
          width: rem(127px);
          font-size: 0;
          >.plat-tag-wrapper {
            >.plat-tag {
              display: inline-block;
              padding: rem(3px) rem(6px);
              background-color: #0084ff;
              border-radius: rem(10px);
              font-size: rem(10px);
              color: #ffffff;
            }
          }
          >.tag-msg {
            margin-top: rem(6px);
            >p {
              line-height: rem(18px);
              font-size: rem(12px);
              color: #333333;
            }
          }
          &:after {
            content: '';
            position: absolute;
            top: rem(24px);
            right: 0;
            width: rem(1px);
            height: rem(36px);
            background-color: #e5e5e5;
          }
        }
        >.item-center {
          float: left;
          display: inline-block;
          padding-left: rem(16px);
          >.item-info-wrapper {
            padding-top: rem(16px);
            >li {
              display: flex;
              line-height: rem(18px);
              >.left {
                flex: 0 0 rem(50px);
                width: rem(50px);
                font-size: rem(12px);
                color: #666666;
              }
              >.right {
                padding-left: rem(10px);
                flex: 1;
                font-size: rem(12px);
                color: #333333;
                &.dc3838 {
                  color: #dc3838;
                }
              }
            }
          }
        }
        >.item-right {
          float: right;
          height: 100%;
          >.btn-wrapper {
            margin-right: rem(12px);
            height: 100%;
            line-height: rem(60px);
            >.plat-btn {
              display: inline-block;
              padding: rem(6px) rem(10px);
              background-color: #dc3838;
              line-height: rem(12px);
              border-radius: rem(24px);
              font-size: rem(12px);
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .rule-wrapper {
    margin: rem(20px) auto 0;
    width: rem(343px);
    height: rem(162px);
    background: url("../images/mobile-rules-bg.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    >.text-wrapper {
      padding: rem(50px) 0 0 rem(16px);
      >li {
        line-height: rem(24px);
        font-size: rem(12px);
        color: #ff634a;
      }
    }
  }
}
